<template>
  <chart :auto-resize="true" :options="options"> </chart>
</template>

<script>
var areaList = [
  "00:00",
  "00:30",
  "01:00",
  "01:30",
  "02:00",
  "02:30",
  "03:00",
  "03:30",
  "04:00",
  "04:30",
  "05:00",
  "05:30",
  "06:00",
  "06:30",
  "07:00",
  "07:30",
  "08:00",
  "08:30",
  "09:00",
  "09:30",
  "10:00",
  "10:30",
  "11:00",
  "11:30",
  "12:00",
  "12:30",
  "13:00",
  "13:30",
  "14:00",
  "14:30",
  "15:00",
  "15:30",
];

var arr = [
  200,
  220,
  250,
  300,
  360,
  440,
  450,
  490,
  500,
  510,
  560,
  600,
  700,
  720,
  730,
  740,
  760,
  800,
  840,
  880,
  890,
  893,
  920,
  930,
  960,
  969,
  1000,
  1080,
  1100,
  1120,
  1130,
  1190,
]; //处理中的数据
var arr1 = [
  200,
  210,
  220,
  260,
  300,
  400,
  405,
  460,
  480,
  490,
  510,
  560,
  640,
  690,
  700,
  710,
  720,
  760,
  790,
  800,
  830,
  843,
  880,
  890,
  901,
  928,
  945,
  964,
  1020,
  1037,
  1049,
  1067,
];
var displayNum = screen.width > 1500 ? 8 : 8; //每次显示数据条数
var groupNum = Math.ceil(arr.length / displayNum);
var arrGroup = [];
// arr循环
for (var i = 0; i < arr.length; i += displayNum) {
  //数据按个数分组存储
  arrGroup.push(arr.slice(i, i + displayNum));
}

var areaGroup = [];
for (var i = 0; i < areaList.length; i += displayNum) {
  //区域名称按个数分组存储
  areaGroup.push(areaList.slice(i, i + displayNum));
}
var groupOption = [];
for (var i = 0; i < groupNum; i++) {
  var temp = {
    xAxis: [
      {
        data: areaGroup[i],
        // splitLine: { show: false },
      },
    ],
    series: [
      // { data: arrGroup[i] },
    ],
  };
  groupOption.push(temp);
}

import { graphic } from "echarts/lib/export";
export default {
  data() {
    return {
      options: {
        baseOption: {
          color: ["#6A5ACD", "#F1FA50"],
          timeline: {
            autoPlay: true,
            playInterval: 2000,
            data: areaGroup,
            label: {
              formatter: function (s) {
                return "";
              },
            },
            // 不显示底下的切换滚轮
            show: false,
          },
          title: {
            subtext: "",
          },
          tooltip: {},
          calculable: true,
          grid: {
            left: "5%",
            right: "5%",
            bottom: "3%",
            containLabel: true,
          },
          legend: {
            icon: "circle",
            data: ["实际值", "平均值"],
            itemHeight: 9, //修改icon图形大小
            top: "10",
            padding: [15, 10, 0, 0],
            textStyle: {
              //图例文字的样式
              color: "#fff",
              fontSize: 12,
              padding: [0, 10, 0, 0],
            },
          },

          dataset: {
            dimensions: ["product", "实际值", "平均值"],
            source: {
              // 'product':
              product: areaList,
              实际值: arr,
              平均值: arr1,
            },
          },
          xAxis: [
            {
              type: "category",
              // axisLabel: { interval: 0 },
              data: areaList,
              splitLine: { show: false },
              boundaryGap: false, // x轴两边不留白
              // splitLine: {
              //   show: false,
              // },
              axisLabel: {
                color: " #48eaff",
              },
              axisLine: {
                //y轴
                show: false,
              },
              axisTick: {
                //y轴刻度线
                show: false,
              },
            },
          ],
          yAxis: [
            {
              show: true,
              name: "(Kwh)",
              scale: true,
              splitNumber: 7,
              minInterval: 1, //纵坐标为整数
              type: "value",
              offset: 10,
              nameTextStyle: {
                color: "#48eaff",
                fontSize: 12,
                padding: [0, 0, 0, -40], // 四个数字分别为上右下左与原位置距离
              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                color: " #48eaff",
              },
              axisLine: {
                //y轴
                show: false,
              },
              axisTick: {
                //y轴刻度线
                show: false,
              },

              max: 1200,
              interval: 200, //每次增加几个
            },
          ],
          series: [
            {
              name: "实际值",
              type: "line",

              itemStyle: {
                // color: "#6A5ACD",
                normal: {
                  lineStyle: {
                    // 系列级个性化折线样式
                    width: 2,
                    type: "solid",
                    color: new graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,

                        color: "#C63DFF",
                      },
                    ]), //线条渐变色
                  },
                },
              }, //线条样式
              areaStyle: {
                normal: {
                  //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                  color: new graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(80,141,255,0.39)",
                    },
                    {
                      offset: 0.34,
                      color: "rgba(56,155,255,0.25)",
                    },
                    {
                      offset: 1,
                      color: "rgba(38,197,254,0.00)",
                    },
                  ]),
                },
              }, //区域颜色渐变

              data: areaGroup[i],
            },
            {
              name: "平均值",
              type: "line",
              // stack: "总量",
              // data: [320, 332, 301, 334, 390, 330, 320],
              itemStyle: {
                // color: "#6A5ACD",
                normal: {
                  lineStyle: {
                    // 系列级个性化折线样式
                    width: 2,
                    type: "solid",
                    color: new graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#F1FA50",
                      },
                    ]), //线条渐变色
                  },
                },
              }, //线条样式
              areaStyle: {
                normal: {
                  // //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                  color: new graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(80,141,255,0.39)",
                    },
                    {
                      offset: 0.34,
                      color: "rgba(56,155,255,0.25)",
                    },
                    {
                      offset: 1,
                      color: "rgba(38,197,254,0.00)",
                    },
                  ]),
                },
              }, //区域颜色渐变
              data: areaGroup[i],
            },
          ],
        },
        options: groupOption,
      },
    };
  },
};
</script>
